<template>
  <div class="cityGroup">
    <van-index-bar :index-list="indexList">
      <van-index-anchor index="热门" />
      <div class="hotCityWrap">
        <template v-for="(item, index) in groupData?.hotCities">
          <div class="hotCity" @click="cityClick(item)">
            {{ item.cityName }}
          </div>
        </template>
      </div>

      <template v-for="(groupItem, index) in groupData?.cities" :key="index">
        <van-index-anchor :index="groupItem.group" />
        <template v-for="(city, indexy) in groupItem.cities" :key="indexy">
          <van-cell :title="city.cityName" @click="cityClick(item)"></van-cell>
        </template>
      </template>
    </van-index-bar>
  </div>
</template>

<script setup>
import { computed } from "vue";
import useCityStore from "@/stores/modules/city";
import { useRouter } from "vue-router";
const props = defineProps({
  groupData: {
    type: Object,
    default: () => {},
  },
});
const indexList = computed(() => {
  const arr = props.groupData.cities.map((item) => item.group);
  arr.unshift("#");
  return arr;
});
/* 城市点击 */
const router = useRouter();
const cityStore = useCityStore();
const cityClick = (payload) => {
  cityStore.currentCity = payload;
  router.back();
};
</script>

<style lang="less" scoped>
.cityGroup {
  .hotCityWrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 10px;
    padding-right: 25px;
    .hotCity {
      width: 70px;
      height: 28px;
      border-radius: 14px;
      font-size: 12px;
      color: #000;
      text-align: center;
      line-height: 28px;
      background-color: #fff4ec;
      margin: 6px 0;
    }
  }
}
</style>
